$f: 19.2;

body [aos] {
  -webkit-transition-duration: 2.5s;
  transition-duration: 2.5s;
  -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
  transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
}


html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: unset !important;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
  transition: all 600ms;
  padding: 30/$f+vw 48/$f+vw;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .lbox {
    display: flex;
    align-items: center;

    .logo {
      img {
        width: 18/$f+vw;
      }
    }

    .links {
      display: flex;
      margin-left: 64/$f+vw;

      a {
        color: #3C3C3C;
        line-height: 1.5;
        margin: 0 32/$f+vw;
        transition: all 600ms;
        &:first-child {
          margin-left: 0;
        }
        &:hover{
          color:#40F;
        }
      }
    }
  }

  .rbox {
    display: flex;

    .common_btn_bg {
      padding: 12/$f+vw 24/$f+vw;
      border-radius: 4px;
      background: #40F;
      display: flex;
      align-items: center;
      color: white;
      line-height: 1.5;
      transition: all 600ms;

      svg {
        width: 17/$f+vw;
        height: auto;
        display: block;
        margin-right: 8/$f+vw;
      }

      &:hover {
        background: #3000B2;
      }
    }

    .common_btn {
      padding: 12/$f+vw 24/$f+vw;
      border-radius: 4px;
      border: 0.5px solid #898989;
      display: flex;
      align-items: center;
      color: #3C3C3C;
      line-height: 1.5;
      margin-left: 13/$f+vw;
      transition: all 600ms;

      svg {
        width: 18/$f+vw;
        height: auto;
        display: block;
        margin-right: 8/$f+vw;
      }

      &:hover {
        background: #F9F9F9;
      }
    }
  }


  &.hide {
    transform: translateY(-100%);

    .rlan {
      transform: translateX(100%);
    }
  }
}


.hasBg {
  background: rgba(245, 245, 245, 0.60);
  backdrop-filter: blur(12px);
}


.pheader {
  display: none;
  position: fixed;
  top: 0;
  height: 60px;
  width: 100%;
  left: 0;
  z-index: 100;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);

  .menu {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: rgba(245, 245, 245, 0.60);
    backdrop-filter: blur(12px);

    .l {
      display: flex;
      align-items: center;

      a {
        margin-left: 32px;
        // transform: translateY(2px);
        display: flex;
        align-items: center;

        img {
          height: 30px;
          object-fit: contain;
        }

        p {
          margin-left: 10px;
          font-size: 14px;
        }
      }

    }



    .navbox {
      margin-right: 20px;
      transition: all 600ms;

      .line {
        width: 30px;
        height: 1px;
        background-color: #000;
        margin: 8px 0;
        -webkit-transition: all .6s;
        transition: all .6s;
      }
    }

    .activeBox {
      transform: translateX(10px);

      .line:nth-child(1) {
        transform: rotate(45deg) translateY(12px);
      }

      .line:nth-child(2) {
        transform: translateX(30px);
        opacity: 0;
      }

      .line:nth-child(3) {
        transform: rotate(-45deg) translateY(-12px);
      }
    }
  }
}

.menuList {
  position: fixed;
  left: 0;
  top: 59px;
  width: 100%;
  z-index: 1001;
  background: #ececec;
  display: none;
  height: calc(100vh - 59px);

  .lan {
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    a {
      color: #646464;
      margin-left: 10px;
    }

    .active {
      font-weight: bolder;
      color: #000000;
    }
  }

  .item {
    //background: rgba(255,255,255,.8);
    padding: 1rem;
    background: #ececec;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    a {
      color: #000;
      display: block;
      position: relative;
      text-transform: capitalize;

      img {
        position: absolute;
        right: 0;
        width: 20px;
        transition: all 600ms;
        top: 5px;
      }

      .icon2 {
        position: static;
        width: auto;
        margin-right: 10px;
      }

      .rotate {
        transform: rotate(90deg);
      }
    }

    .tb {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      a {
        // width: 100%;
        display: block;
      }

      img {
        width: 30px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        transition: all 600ms;
      }

      .rotate {
        transform: translateY(-50%) rotate(90deg);
      }
    }

    .types_top {
      display: none;

      a {
        font-size: 14px;
        margin-top: 15px;
      }
    }
  }
}

.activeList {
  transform: translateY(0);
}

.foot {
  padding: 40/$f+vw 48/$f+vw 0 0;
  border-top: 0.5px solid #E2E2E2;
  display: flex;
  justify-content: space-between;
  border-radius: 16px;
  .logo {
    img {
      width: 530/$f+vw;
      // height: 303/$f+vw;
      object-fit: cover;
    }
  }

  .info {
    width: calc(100% - 35vw);

    .d1 {
      display: flex;
      margin: 1/$f+vw 0 86/$f+vw 0;

      .contact_box {
        .p1 {
          color: #1C1C1C;
          font-weight: 700;
          line-height: 1.5;
          margin-bottom: 24/$f+vw;
        }

        .text {
          .item {
            display: flex;
            color: #1C1C1C;
            line-height: 1.5;

            &:not(:last-child) {
              margin-bottom: 16/$f+vw;
            }

            .pt {
              width: 58/$f+vw;
              margin-right: 17/$f+vw;
            }
          }
        }
      }

      .additional_box {
        margin: 0 194/$f+vw 0 251/$f+vw;

        .p1 {
          color: #1C1C1C;
          font-weight: 700;
          line-height: 1.5;
          margin-bottom: 24/$f+vw;
        }

        .links {
          a {
            color: #1C1C1C;
            line-height: 1.5;
            display: block;

            &:not(:last-child) {
              margin-bottom: 16/$f+vw;
            }
          }
        }
      }

      .media_box {
        .p1 {
          color: #1C1C1C;
          font-weight: 700;
          line-height: 1.5;
          margin-bottom: 22/$f+vw;
        }

        .icons {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 14/$f+vw 24/$f+vw;

          a {
            img {
              width: 28/$f+vw;
              height: 28/$f+vw;
              opacity: .3;
              filter: grayscale(100%);
              transition: all 600ms;
            }
            &:hover{
              img{
                 opacity: 1;
                 filter: grayscale(0);
              }
            }
          }
        }
      }
    }

    .d2 {
      display: flex;
      justify-content: flex-end;
      line-height: 1.5;

      .p1 {
        color: #9C9C9C;
        margin-right: 169/$f+vw;
      }

      .links {
        display: flex;
        align-items: center;

        a {
          color: #9C9C9C;
          transition: all 600ms;

          &:hover {
            color: #000;
          }
        }

        span {
          width: 0.5px;
          height: 24/$f+vw;
          background: #9C9C9C;
          margin: 0 16/$f+vw;
        }
      }
    }
  }
}

.foot_phone {
  border-top: 0.5px solid #E2E2E2;
  display: none;
  padding: 40px  32px;
  .d1{
    display: flex;
    justify-content: space-between;
    .logo {
      img {
        width:150px;
        object-fit: cover;
      }
    }
    .contact_box {
      width: calc(100% - 170px);
      .p1 {
        color: #1C1C1C;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 12px;
      }

      .text {
        .item {
          display: flex;
          color: #1C1C1C;
          // line-height: 1.3;
          font-size: 12px;

          &:not(:last-child) {
            margin-bottom: 6px;
          }

          .pt {
            width: 45px;
            margin-right: 10px;
          }
          .pd{
            overflow-wrap: anywhere;
            font-size: 12px;
          }
        }
      }
    }
  }
  .d2{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .additional_box {
      .p1 {
        color: #1C1C1C;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 12px;
      }


      .links {
        display: flex;
        a {
          color: #1C1C1C;
          line-height: 1.5;
          display: block;

          &:not(:last-child) {
           margin-right: 22px;
          }
        }
      }
    }

    .media_box {
      .p1 {
        color: #1C1C1C;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom:12px;
      }

      .icons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0 15px;

        a {
          img {
            width:24px;
            opacity: .3;
            filter: grayscale(100%);
            transition: all 600ms;
          }
          &:hover{
            img{
               opacity: 1;
               filter: grayscale(0);
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {


  .header {
    display: none;
  }

  .pheader {
    display: flex;
  }
  .foot{
    display: none;
  }
  .foot_phone{
    display: block;
  }
}